import React, {useEffect, useState} from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Dialog } from 'antd-mobile'
import { Avatar, List } from 'antd-mobile'
import { useDispatch } from 'react-redux'
import { logout } from '../../store/reducer/authSlice'
import Bottom from '../../components/Bottom'
import { getUser } from '../../api'
import './index.css'

export default function My() {
  const [userInfo,setUserInfo] = useState({})
  const navigate = useNavigate()
  const dispath = useDispatch()


  useEffect(()=>{
    async function userObj(){
      try {
        const result = await getUser()
        setUserInfo({...result[0]})
      } catch (error) {
        if(error.code === 451){
          setTimeout(() => {
            navigate('/login')
          }, 2000);
        }
      }
      
    }
    userObj()
  },[navigate])

  const unlogin = async()=>{
    const result = await Dialog.confirm({
      content: '你确定退出登录吗?',
    })
    if (result) {
      dispath(logout())
      navigate('/login')
      
    }
    
  }

  const inPim = ()=>{
    navigate('/pim')
  }

  return (
    <div id='my'>
      <List>
        <List.Item
          onClick={inPim}
          style={{padding:'30px 0', paddingLeft: '30px', fontSize: '24px'}}
          prefix={<Avatar style={{ '--size': '64px', paddingRight: '16px' }} src={userInfo.picture ? `http://120.26.44.181/back/img/${userInfo.picture}` : ''} />}
          description={userInfo.explains}
        >
          {userInfo.account}
        </List.Item>
      </List>
      
      <div className='box'>
        <Button onClick={unlogin} block color='danger' size='middle'>
          退出登录
        </Button>
      </div>
      <Bottom />
    </div>
  )
}
